<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <!-- import CSS -->
    <script src="./static/js/vue3.js"></script>
    <link rel="stylesheet" href="./static/css/common.css">
    <link rel="stylesheet" href="./static/css/note.css">
    <!-- import JavaScript -->
    <script src="./static/js/markdown-it.min.js"></script>
    <script src="./static/js/axios.min.js"></script>
    <title>MarGco</title>
</head>
<body>
<div id="app">
    <div class="topNavigationBar">
        <div class="tb-left">
            <div class="marGcoIcon" @click="goTo('./index.html')">MARGCO</div>
            <div class="marGcoNavigationBarButton" v-for="item in topBars" @click="goTo(item.link)">{{item.name}}</div>
        </div>
        <div class="tb-right" v-if="isLogin">
            <img alt="icon" class="userIcon" src="./static/img/CokeGGts.jpg">
        </div>
        <div class="tb-right" v-else>
            <button class="marGcoButton" @click="goTo('./certified.html')">
                {{userButtonText[0]}}
            </button>
            <button class="marGcoButton button-cyan" @click="goTo('./certified.html')">
                {{userButtonText[1]}}
            </button>
        </div>
    </div>
    <div class="dialog-box" v-show="showDeleteDialogBox" @click="showDeleteDialogBox=false">
        <div class="dialog-box-main" @click.stop>
            <div>
                <button class="marGcoButton">{{deleteButtonText}}</button>
            </div>
        </div>
    </div>
    <div class="mainContainer">
        <div class="helloElement1 helloElementPositionAndSize2"></div>
        <div class="helloElement2 helloElementPositionAndSize1"></div>
        <div class="helloElement3 helloElementPositionAndSize3"></div>
        <div class="leftContainer">
            <div class="tooltip-container">
                <span class="tooltip">{{labelDescribeText[3]}}</span>
                <span class="text">{{labelDescribeText[1]}}</span>
                <span>{{labelDescribeText[2]}}</span>
            </div>
            <div class="label-button" v-for="item in ['闲聊','技术','求助','说说','讨论','编程','风景','图集','算法']"
                 :title="item">
                - {{item}}
            </div>
        </div>
        <div class="rightContainer">
            <div class="rc-noteContainer-father">
                <div class="rc-noteContainer-tools">
                    <div class="user-details-top">
                        <div class="user-topTitle">
                            {{collectionText}}
                        </div>
                    </div>
                </div>
                <div class="rc-noteContainer note-frame">
                    <div class="itemCard" v-for="item in [1,2,3,4,5,6,7,8,9,10,11,12,13]">
                        <div class="content">
                            <div class="heading">11111111111</div>
                            <div class="para">22222222222<br>3333333333</div>
                            <button class="btn">{{noteItemText}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="./static/js/collection.js"></script>
</html>